<template>
  <div class="quxiang">
    <p style="font-size: 16px; margin: 2% 5%">北京</p>
    <div class="renyuan">
      <div>
        <p style="color: #d8345f; font-size: 20px">6000人</p>
        <img src="../imgs/renyuan1.png" alt="" />
        <p>2022</p>
      </div>
      <div>
        <p style="color: #05c3df; font-size: 20px">8990人</p>
        <img src="../imgs/renyuan2.png" alt="" />
        <p>2021</p>
      </div>
      <div>
        <p style="color: #fcd247; font-size: 20px">2345人</p>
        <img src="../imgs/renyuan3.png" alt="" />
        <p>2020</p>
      </div>
    </div>
    <div class="quXaing" ref="quXaing"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { reactive, ref, onMounted, watch } from "vue";
import { getQuxiang } from "../request/index";
const quXaing = ref();
const option = reactive({
  grid: {
    left: "10%",
    right: "10%",
    top: "10%",
    bottom: "10%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    boundaryGap: [0, 0.01],
    splitLine: { show: false },
    axisLabel: {
      textStyle: {
        color: "#fff",
      },
    }, // 取消 x 轴网格线
  },
  yAxis: {
    type: "category",
    data: ["湖北", "江苏", "浙江", "广西", "广东", "重庆", "天津", "上海"],
    axisLabel: {
      textStyle: {
        color: "#FFF", // 修改 x 轴标题颜色为红色
      },
    },
  },
  series: [
    {
      name: "合作社",
      type: "bar",
      // data: [],
      data: [32, 55, 73, 82, 56, 35, 42, 61],

      itemStyle: {
        color: "#d8345f",
        borderRadius: 10,
      },
    },
    {
      name: "社员人数",
      type: "bar",
      // data: [],
      data: [46, 72, 56, 81, 27, 35, 49, 102],

      itemStyle: {
        color: "#05c3df",
        borderRadius: 10,
      },
    },
    {
      name: "单股金",
      type: "bar",
      // data: [],
      data: [55, 85, 76, 49, 46, 82, 52, 56],

      itemStyle: {
        color: "#fcd247",
        borderRadius: 10,
      },
    },
  ],
});
let asd;
onMounted(() => {
  asd = echarts.init(quXaing.value);
  asd.setOption(option);
  getQuxiang().then(res=>{
    console.log(res.data.data);
  })
});
window.addEventListener("resize", function () {
  asd.resize();
});
watch(option, () => {
  asd.setOption(option);
});
</script>

<style lang="scss">
.quxiang {
  width: 90%;
  height: 100%;
  background: url("../imgs/border1.png") no-repeat;
  background-size: 100% 100%;
  color: #fff;
  margin: 2% 5%;
  overflow: hidden;
}
.renyuan {
  width: 100%;
  display: flex;
  div {
    width: 30%;
    text-align: center;
  }
}
.quXaing {
  width: 100%;
  height: 350px;
}
</style>
